<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="明月">
    <title>优酷2</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        nav {
            width: 1920px;
            height: 60px;
            background-color: #FCFFFC;
        }

        ul {
            list-style: none;
        }

        nav .first {
            width: 1600px;
            text-align: center;
            line-height: 60px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }

        .first li a {
            color: #818380;
            text-decoration: none;
        }

        .first li a:hover {
            color: #D5AB2F;
        }

        span {
            display: inline-block;
            background-image: url('img/icon.png');
        }

        .icon-a {
            width: 10px;
            height: 7px;
            margin-left: 3px;
            background-position: -60px 0;
        }

        .first li {
            position: relative;
        }

        .watch {
            width: 260px;
            position: absolute;
            padding: 0;
            background-color: #FCFFFC;
            margin-top: 2px;
            margin-left: -90px;
            box-shadow: 0 0 1px;
             display: none;  
        }

        .watch li {
            float: left;
            width: 130px;
            height: 60px;
        }

        .img-b {
            width: 15px;
            height: 15px;
            background-position: -110px 0;
            position: absolute;
            top: -9px;
            left: 90px;
        }

        .active .zhuan span {
            transition: all 2s linear;
        }

        .active .zhuan:hover span {
            transform: rotate(180deg);
        }
    </style>
</head>

<body>
    <nav>
        <ul class="first">
            <li><a href="#" style="height:60px;width:50px;color:#75AFCE;
                border-bottom:3px solid #74B1CD;display:inline-block;">首页</a></li>
            <li class="active">
                <a href="#">剧集</a>
                <ul class="watch">
                    <span class="img-b"></span>
                    <li><a href="#">楚乔传 TV版</a></li>
                    <li><a href="#">春风十里不...</a></li>
                    <li><a href="#">镇魂街 第一季</a></li>
                    <li><a href="#">我的前半生</a></li>
                    <li><a href="#">醉玲珑</a></li>
                    <li><a href="#">微微一笑很...</a></li>
                    <li><a href="#">终极三国2017</a></li>
                    <li><a href="#">龙珠传奇</a></li>
                </ul>
            </li>
            <li class="active">
                <a href="#">电影</a>
                <ul class="watch">
                    <span class="img-b"></span>
                    <li><a href="#">速度与激情8</a></li>
                    <li><a href="#">人间大炮</a></li>
                    <li><a href="#">战狼</a></li>
                    <li><a href="#">杀破狼2</a></li>
                    <li><a href="#">逆时营救</a></li>
                    <li><a href="#">记忆大师</a></li>
                    <li><a href="#">我的外星女友</a></li>
                    <li><a href="#">有部电影</a></li>
                </ul>
            </li>
            <li class="active">
                <a href="#">综艺</a>
                <ul class="watch">
                    <span class="img-b"></span>
                    <li><a href="#">极限挑战 第...</a></li>
                    <li><a href="#">挑战者联盟...</a></li>
                    <li><a href="#">脑洞大开 第...</a></li>
                    <li><a href="#">火星情报局...</a></li>
                    <li><a href="#">暴走漫画——...</a></li>
                    <li><a href="#">日日煮 2017</a></li>
                    <li><a href="#">开心俱乐部...</a></li>
                    <li><a href="#">举杯呵呵喝...</a></li>
                </ul>
            </li>
            <li><a href="#">音乐</a></li>
            <li class="active">
                <a href="#">少儿</a>
                <ul class="watch">
                    <span class="img-b"></span>
                    <li><a href="#">宝狄与好友...</a></li>
                    <li><a href="#">小猪佩奇</a></li>
                    <li><a href="#">纳米核心 第...</a></li>
                    <li><a href="#">汪汪队立大...</a></li>
                    <li><a href="#">我的汤姆猫</a></li>
                    <li><a href="#">会说话的家族</a></li>
                    <li><a href="#">小玲玩具</a></li>
                    <li><a href="#">棉花糖和云...</a></li>
                </ul>
            </li>
            <li><a href="#">来疯</a></li>
            <li><a href="#">直播</a></li>
            <li><a href="#">片库</a></li>
            <li><a href="#">资讯</a></li>
            <li><a href="#">纪实</a></li>
            <li><a href="#">公益</a></li>
            <li><a href="#">体育</a></li>
            <li><a href="#">汽车</a></li>
            <li><a href="#">科技</a></li>
            <li><a href="#">财经</a></li>
            <li><a href="#">娱乐</a></li>
            <li><a href="#">文化</a></li>
            <li><a href="#">动漫</a></li>
            <li><a href="#">搞笑</a></li>
            <li><a href="#">旅游</a></li>
            <li><a href="#">时尚</a></li>
            <li><a href="#">亲子</a></li>
            <li><a href="#">教育</a></li>
            <li><a href="#">游戏</a></li>
            <li class="active">
                <a href="#" class="zhuan">更多<span class="icon-a"></span></a>
                <ul class="watch final" style="width:100px;margin-left:-30px;">
                    <span class="img-b" style="left:40px;"></span>
                    <li><a href="#">VR</a></li>
                    <li><a href="#">生活</a></li>
                    <li><a href="#">原创</a></li>
                    <li><a href="#">排行</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</body>

</html>
<script>
    var lis = document.querySelectorAll('.active');
    console.log(lis);
    var watch = document.querySelectorAll('.watch');
    console.log(watch);
    for (var i = 0; i < lis.length; i++) {
        lis[i].index = i;
        lis[i].onmouseover = function () {
            watch[this.index].style.display = 'block';
            lis[this.innerText] = watch[this.index];
        }
        lis[i].onmouseout = function () {
            watch[this.index].style.display = 'none';
        }
    }

</script>